<template>
	<view class="box-con">
		<my-title :bgColor="bgColor" :height="headHeight">
			<template v-slot:left>
				<view class="left">
					<image :src="goBackImg" @click="gotoBack" v-if="isBlack"></image>
					<image :src="goBackImgFFF" @click="gotoBack" v-else></image>
				</view>
			</template>
			<template v-slot:center>
				<view class="center">
					<text :style="{'color': titleColor}">{{title}}</text>
				</view>
			</template>
			<template v-slot:right>
				<slot name="right"></slot>
			</template>
		</my-title>
	</view>
</template>

<script>
	import myTitle from '@/components/common/my-title/my-title.vue'

	export default {
		components: {
			myTitle
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			titleColor: {
				type: String,
				default: '#2c2c2c'
			},
			isBlack: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				goBackImg: require('@/static/img/common/goBack.svg'),
				goBackImgFFF: require('@/static/img/common/goBack_fff.svg'),
				headHeight: '49'
			}
		},
		methods: {
			gotoBack() {
				this.$emit('gotoBack')
			},
			getElementHeight() {
				//  监听键盘高度变化
				var that = this
				const query = uni.createSelectorQuery().in(this);
				query.select('.box-con').boundingClientRect(data => {
					//console.log(data.height)
					this.$emit('changeHight', data.height)
				}).exec();
			},
		},
		mounted() {
			this.getElementHeight()
		}
	}
</script>

<style lang="scss" scoped>
	.left {
		// text-align: center;

		image {
			margin-top: 16px;
			margin-left: 30rpx;
			width: 17px;
			height: 17px;
		}
	}

	.center {
		text-align: center;
		line-height: 49px;

		text {
			font-size: 38rpx;
			font-weight: 600;
			color: rgba(0, 0, 0, 1);
		}

	}
</style>
